<template>
  <div style="width: 100%;height: 100%;">
    <div class="tit"></div>
    <el-row style="height: 90vh;" :gutter="16">
      <!--左部分-->
      <el-col :span="6" class="z-col">
        <el-row>
          <el-row class="row1">
            <el-col :span="12">
              <el-row :gutter="16">
                <el-col :span="7" class="border-box border-boxs">
                  微
                </el-col>
                <el-col :span="16">
                  <div class="border-boxs-text">
                    <div class="border-boxs-text-tit border-boxs-texts ">小微企业</div>
                    <div class="border-boxs-texts" style="margin-top:-0.4vh">

                      <div class="mydemo">
                        <number-l :c="'c5'"></number-l>
                        <number-l :c="'c6'"></number-l>
                        .
                        <number-l :c="'c8'"></number-l>
                        <div class="clocks">万户</div>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="12">
              <el-row :gutter="16">
                <el-col :span="7" class="border-box border-boxs">
                  个
                </el-col>
                <el-col :span="16">
                  <div class="border-boxs-text">
                    <div class="border-boxs-text-tit border-boxs-texts ">个体工商户</div>
                    <div class="border-boxs-texts" style="margin-top:-0.4vh">

                      <div class="mydemo">
                        <number-l :c="'c2'"></number-l>
                        <number-l :c="'c3'"></number-l>
                        <number-l :c="'c6'"></number-l>
                        .
                        <number-l :c="'c7'"></number-l>
                        <div class="clocks">万户</div>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row class="row1">
            <el-col :span="12">
              <el-row :gutter="16">
                <el-col :span="7" class="border-box border-boxs">
                  转
                </el-col>
                <el-col :span="16">
                  <div class="border-boxs-text">
                    <div class="border-boxs-text-tit border-boxs-texts ">新增"个转企"企业</div>
                    <div class="border-boxs-texts" style="margin-top:-0.4vh">

                      <div class="mydemo">
                        <number-l :c="'c6'"></number-l>
                        <number-l :c="'c9'"></number-l>
                        <number-l :c="'c1'"></number-l>
                        <div class="clocks">户</div>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="12">
              <div class="border-boxs-text" style="margin-left: -1vh">
                <div class="border-boxs-text-tit border-boxs-texts ">累计"个转企"企业</div>
                <div style="margin: 0.2vh 0 0 -1vh">

                  <div class="mydemo">
                    <number-l :c="'c1'"></number-l>
                    <number-l :c="'c5'"></number-l>
                    <number-l :c="'c3'"></number-l>
                    <number-l :c="'c2'"></number-l>
                    <number-l :c="'c9'"></number-l>
                    <div class="clocks">户</div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row class="row1">
            <el-col :span="12">
              <el-row :gutter="16">
                <el-col :span="7" class="border-box border-boxs">
                  专
                </el-col>
                <el-col :span="16">
                  <div class="border-boxs-text">
                    <div class="border-boxs-text-tit border-boxs-texts ">"专精特新"企业</div>
                    <div class="border-boxs-texts" style="margin-top:-0.4vh">

                      <div class="mydemo">
                        <number-l :c="'c1'"></number-l>
                        <number-l :c="'c9'"></number-l>
                        <number-l :c="'c8'"></number-l>
                        <div class="clocks">户</div>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="12">
              <el-row style="margin-left: -1vh">
                <el-col :span="12">
                  <div class="border-boxs-text">
                    <div class="border-boxs-text-tit border-boxs-texts ">国家级</div>
                    <div style="margin: 0.2vh 0 0 -1vh">

                      <div class="mydemo">
                        <number-l :c="'c1'"></number-l>
                        <number-l :c="'c6'"></number-l>
                        <div class="clocks">户</div>
                      </div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="11">
                  <div class="border-boxs-text">
                    <div class="border-boxs-text-tit border-boxs-texts ">省级</div>
                    <div style="margin: 0.2vh 0 0 -1vh">

                      <div class="mydemo">
                        <number-l :c="'c1'"></number-l>
                        <number-l :c="'c8'"></number-l>
                        <number-l :c="'c2'"></number-l>
                        <div class="clocks">户</div>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row class="row1">
            <el-col :span="12">
              <el-row :gutter="16">
                <el-col :span="7" class="border-box border-boxs">
                  服
                </el-col>
                <el-col :span="16">
                  <div class="border-boxs-text">
                    <div class="border-boxs-text-tit border-boxs-texts ">服务业市场主体</div>
                    <div class="border-boxs-texts" style="margin-top:-0.4vh">

                      <div class="mydemo">
                        <number-l :c="'c2'"></number-l>
                        <number-l :c="'c5'"></number-l>
                        .
                        <number-l :c="'c8'"></number-l>
                        <div class="clocks">万户</div>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="12">
              <el-row :gutter="16">
                <el-col :span="7" class="border-box border-boxs">
                  家
                </el-col>
                <el-col :span="16">
                  <div class="border-boxs-text">
                    <div class="border-boxs-text-tit border-boxs-texts ">家庭农场、牧场</div>
                    <div class="border-boxs-texts" style="margin-top:-0.4vh">

                      <div class="mydemo">
                        <number-l :c="'c8'"></number-l>
                        .
                        <number-l :c="'c1'"></number-l>
                        <div class="clocks">万户</div>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-row>

        <el-row style="margin-left: -1.9vh">
          <el-row class="row2">
            <div class="border-box" style="width: 94.8%;border-radius: 8px;margin-top: 4vh">
              <el-row :gutter="16" class="row3">
                <el-col :span="13">
                  <div class="col1 cols">每人拥有市场主体</div>
                </el-col>
                <el-col :span="10">
                  <div class="mydemo cols" style="float: left">
                    <number-l :c="'c1'"></number-l>
                    <number-l :c="'c2'"></number-l>
                    <number-l :c="'c8'"></number-l>
                    <div class="clocks">户</div>
                  </div>
                </el-col>
              </el-row>
            </div>
            <el-row class="row4">
              <el-col :span="12" class="col2">
                <img src="../../assets/jb.png" class="imgs img2">
                全国第
                <div class="mydemo img2">
                  <number-h :c="'c7'"></number-h>
                </div>
                位
              </el-col>
              <el-col :span="12" class="col2">
                <img src="../../assets/jb.png" class="imgs img2">
                东北三省第
                <number-h :c="'c1'"></number-h>
                位
              </el-col>
            </el-row>
            <div class="border-box" style="width: 94.8%;border-radius: 8px;margin-top: 2vh">
              <el-row :gutter="16" class="row3">
                <el-col :span="13">
                  <div class="col1 cols">每人拥有企业</div>
                </el-col>
                <el-col :span="10">
                  <div class="mydemo cols" style="float: left">
                    <number-l :c="'c2'"></number-l>
                    <number-l :c="'c6'"></number-l>
                    .
                    <number-l :c="'c4'"></number-l>
                    <div class="clocks">户</div>
                  </div>
                </el-col>
              </el-row>
            </div>
            <el-row class="row4">
              <el-col :span="12" class="col2">
                <img src="../../assets/jb.png" class="imgs img2">
                全国第
                <number-h :c="'c2'"></number-h>
                位
              </el-col>
              <el-col :span="12" class="col2">
                <img src="../../assets/jb.png" class="imgs img2">
                东北三省第
                <number-h :c="'c2'"></number-h>
                位
              </el-col>
            </el-row>
            <div class="border-box" style="width: 94.8%;border-radius: 8px;margin-top: 2vh">
              <el-row :gutter="16" class="row3">
                <el-col :span="13">
                  <div class="col1 cols">每人拥有个体商户</div>
                </el-col>
                <el-col :span="10">
                  <div class="mydemo cols" style="float: left">
                    <number-l :c="'c9'"></number-l>
                    <number-l :c="'c8'"></number-l>
                    .
                    <number-l :c="'c3'"></number-l>
                    <div class="clocks">户</div>
                  </div>
                </el-col>
              </el-row>
            </div>
            <el-row class="row4">
              <el-col :span="12" class="col2">
                <img src="../../assets/jb.png" class="imgs img2">
                全国第
                <number-h :c="'c4'"></number-h>
                位
              </el-col>
              <el-col :span="12" class="col2">
                <img src="../../assets/jb.png" class="imgs img2">
                东北三省第
                <number-h :c="'c1'"></number-h>
                位
              </el-col>
            </el-row>
          </el-row>
        </el-row>
      </el-col>
      <!--中部分-->
      <el-col :span="12" class="z-col">
        <!--中间部分上半部分-->
        <el-row :gutter="16">
          <el-col :span="6" v-for="(item,index) in count" :key="index">
            <count-z :cs="item.cs" :name="item.name" :num="item.num"></count-z>
          </el-col>
        </el-row>
        <pie-a :value="15" :name="'科技'" style="margin: 42vh 0 0 -2vh" @click=""></pie-a>
        <pie-b :value="25" :name="'医药'" style="margin-top: -22vh"></pie-b>
        <pie-c :value="30" :name="'个体小微'" style="margin: -21vh 0 0 7vh"></pie-c>
        <pie-d :value="67" :name="'四上'" style="margin: -16vh 0 0 17vh"></pie-d>
        <pie-e :value="75" :name="'文旅'" style="margin: -13vh 0 0 30vh"></pie-e>
        <pie-f :value="90" :name="'汽车'" style="margin: -10vh 0 0 45vh"></pie-f>
        <pie-i :value="82" :name="'商贸'" style="margin: -3vh 0 0 59vh"></pie-i>
        <pie-j :value="56" :name="'金融'" style="margin: 2vh 0 0 70vh"></pie-j>
        <pie-h :value="41" :name="'新农业'" style="margin: 4vh 0 0 78vh"></pie-h>
        <pie-k :value="21" :name="'新材料'" style="margin: 6vh 0 0 83vh"></pie-k>
      </el-col>
      <!--右部分-->
      <el-col :span="6" class="z-col" style="margin-top: 1vh">
        <div class="divs" style="width: 100%;height: 8vh;text-align: center;color: #ffffff;font-size: 1.2rem;">
          <span><img src="../../assets/sj.png" class="imgs img2"></span>
          <span style="position: relative;top:-1vh">培育壮大市场主体行动完成进度</span>
        </div>
        <div style="width: 100%;height: 0.2vh;background: linear-gradient(to left, #0066ff,#33ffff, #0066ff);"></div>
        <el-row style="text-align:center;height: 4vh;line-height: 4vh;margin: 3vh 0 0.4vh 0;color: #ffffff">
          <el-col :span="6">地区</el-col>
          <el-col :span="12">目标完成度</el-col>
          <el-col :span="6">排名</el-col>
        </el-row>
        <el-row class="divs" v-for="(imte,index) in datas" :key="index"
                style="margin-bottom: 2vh;text-align:center;height: 4vh;line-height: 4vh;color: #ffffff;">
          <el-col :span="6">{{imte.name}}</el-col>
          <el-col :span="12" v-if="imte.num>=100" style="color: orange">{{imte.num}}%</el-col>
          <el-col :span="12" v-if="imte.num<100" style="color: #33ffff">{{imte.num}}%</el-col>
          <el-col :span="6" v-if="imte.no==1"><img src="../../assets/jp.png" class="imgs"></el-col>
          <el-col :span="6" v-else-if="imte.no==2"><img src="../../assets/yp.png" class="imgs"></el-col>
          <el-col :span="6" v-else-if="imte.no==3"><img src="../../assets/tp.png" class="imgs"></el-col>
          <el-col :span="6" v-else>{{imte.no}}</el-col>
        </el-row>
        <div style="width: 100%;height: 0.2vh;background: linear-gradient(to left, #0066ff,#33ffff, #0066ff);"></div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  import numberH from '../../components/number/numberH'
  import numberL from '../../components/number/numberL'
  import countZ from '../../components/count/countZ'
  import pieA from '../../components/pie/pieA'
  import pieB from '../../components/pie/pieB'
  import pieC from '../../components/pie/pieC'
  import pieD from '../../components/pie/pieD'
  import pieE from '../../components/pie/pieE'
  import pieF from '../../components/pie/pieF'
  import pieI from '../../components/pie/pieI'
  import pieJ from '../../components/pie/pieJ'
  import pieH from '../../components/pie/pieH'
  import pieK from '../../components/pie/pieK'

  export default {
    name: 'largeScreen',
    components: {
      numberH,
      numberL,
      countZ,
      pieA,
      pieB,
      pieC,
      pieD,
      pieE,
      pieF,
      pieI,
      pieJ,
      pieH,
      pieK
    },
    data() {
      return {
        datas: [
          {
            name: '梅河口',
            num: 335.3,
            no: 1
          },
          {
            name: '四平市',
            num: 133.0,
            no: 2
          },
          {
            name: '白山市',
            num: 96.3,
            no: 3
          },
          {
            name: '辽源市',
            num: 95.0,
            no: 4
          },
          {
            name: '延边州',
            num: 89.8,
            no: 5
          },
          {
            name: '通化市',
            num: 89.1,
            no: 6
          },
          {
            name: '松原市',
            num: 82.4,
            no: 7
          },
          {
            name: '白城市',
            num: 81.6,
            no: 8
          },
          {
            name: '长白山',
            num: 75.0,
            no: 9
          },
          {
            name: '吉林市',
            num: 56.1,
            no: 10
          },
          {
            name: '长春市',
            num: 55.8,
            no: 11
          }
        ],
        count: [
          {
            cs: [
              {c: 'c3',},
              {c: 'c0',},
              {c: 'c8',},
              {c: 'c2',},
              {c: 'c0',},
              {c: 'c2',},
              {c: 'c4',},
            ],
            name: '期末实有市场主体',
            num: 70,
          },
          {
            cs: [
              {c: 'c6',},
              {c: 'c3',},
              {c: 'c4',},
              {c: 'c4',},
              {c: 'c5',},
              {c: 'c4',},
            ],
            name: '期末实有企业',
            num: 82,
          },
          {
            cs: [
              {c: 'c1',},
              {c: 'c3',},
              {c: 'c4',},
              {c: 'c7',},
              {c: 'c4',},
              {c: 'c9',},
            ],
            name: '新登记市场主体',
            num: 49,
          },
          {
            cs: [
              {c: 'c3',},
              {c: 'c3',},
              {c: 'c5',},
              {c: 'c9',},
              {c: 'c2',},
            ],
            name: '新登记企业',
            num: 31,
          },
        ],
      }
    },
    methods: {},
    mounted() {
    },
  }
</script>

<style>
  body {
    background: url("../../assets/bj.jpg") no-repeat center;
    background-size: auto;
  }

  .tit {
    background: url("../../assets/tites.jpg") no-repeat center;
    background-size: 100%;
    width: 100%;
    height: 8vh;
  }

  .z-col {
    height: 90vh;
  }

  .border-box {
    position: relative;
    margin: 0 auto;
    height: 7vh;
    border: 2px solid #33ffff;
  }

  .border-box::before {
    position: absolute;
    top: -2px;
    bottom: -2px;
    left: 16px;
    width: calc(100% - 30px);
    content: "";
    border-top: 2px solid #0066ff;
    border-bottom: 2px solid #0066ff;
    z-index: 0;
  }

  .border-box::after {
    position: absolute;
    top: 16px;
    right: -2px;
    left: -2px;
    height: calc(100% - 30px);
    content: "";
    border-right: 2px solid #0066ff;
    border-left: 2px solid #0066ff;
    z-index: 0;
  }

  .border-boxs {
    background: linear-gradient(to bottom, #33ffff, #0066ff);
    -webkit-background-clip: text;
    color: transparent;
    font-size: 230%;
    text-align: center;
    line-height: 6.5vh;
  }

  .mydemo {
    color: #33ffff;
    display: inline-block;
  }

  .clocks {
    display: inline-block;
    font-size: 1rem;
  }

  .border-boxs-text {
    height: 7vh;
    width: 100%;
    background-image: linear-gradient(to right, #003377, transparent);
  }

  .border-boxs-texts {
    padding: 0.6vh 0 0 0.4vh;
  }

  .border-boxs-text-tit {
    height: 30%;
    width: 100%;
    color: #ffffff;
    font-size: 40%;
  }

  .row1 {
    margin-top: 2vh;
  }

  .row2 {
    margin: 0 auto;
  }

  .row3 {
    height: 100%;
  }

  .row4 {
    height: 6vh;
    width: 100%;
    text-align: center;
  }

  .col1 {
    font-size: 100%;
    color: #ffffff;
  }

  .col2 {
    text-align: center;
    color: #ffffff;
  }

  .cols {
    float: right;
    margin: 2vh 0 0 2vh;
  }

  .imgs {
    max-height: 4vh;
    max-width: 4vh;
  }

  .img2 {
    margin-top: 2vh;
  }

  .divs {
    background: rgba(0, 119, 153, 0.1);
  }

</style>
